<!--#
layout("/layouts/platform.html"){
#-->
<script src="${base!}/assets/platform/plugins/echarts/echarts.min.js"></script>
<div id="app" v-cloak>
    <el-row class="header navbar bg-white">
        <el-tabs v-model="pageForm.type"@tab-click="doSearch" >
            <el-tab-pane label="按年统计" name="year"></el-tab-pane>
            <el-tab-pane label="按月统计" name="month"></el-tab-pane>
        </el-tabs>
    </el-row>
    <el-row class="el-table-container">
        <el-row>
            <el-col :span="11">
                <el-row>
                    <p style="text-align: center">受理量统计表</p>
                </el-row>
                <el-row>
                    <el-table :data="tableData"  border size="small" height="350" header-align="center" >
                        <el-table-column sortable="custom"  prop="year"  label="年/月" width="100"  header-align="center" align="center"show-overflow-tooltip></el-table-column>
                        <el-table-column  sortable="custom" prop="count" label="受理数量"  width="100" header-align="center" align="center"show-overflow-tooltip></el-table-column>
                        <el-table-column  prop="count" label="操作" header-align="center" align="center"show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.year.length==4" @click="getList(scope.row.year,'','year')" size="mini">样品列表</el-button>
                                <el-button v-if="scope.row.year.length==7" @click="getList(scope.row.year,'','month')" size="mini">样品列表</el-button>
                                <el-button @click="getCount(scope.row.year)" size="mini">流程统计-></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-col>
            <el-col :span="1">
                <p style="text-align: center"></p>
            </el-col>
            <el-col :span="11">
                <el-row>
                    <p style="text-align: center">
                        {{pageForm.date}}<span v-if="pageForm.type=='year'">年</span><span v-else>月</span>受理流程统计表
                    </p>
                </el-row>
                <el-row>
                    <el-table :data="countTableData" border size="small" height="350" header-align="center" >
                        <el-table-column sortable="custom"  prop="name"  label="流程"  width="100" header-align="center" align="center"show-overflow-tooltip></el-table-column>
                        <el-table-column  sortable="custom" prop="count" label="数量"  width="100" header-align="center" align="center"show-overflow-tooltip></el-table-column>
                        <el-table-column   prop="count" label="操作"  header-align="center" align="center"show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.year.length==4" @click="getList(scope.row.year,scope.row.lczt,'year')" size="mini">样品列表</el-button>
                                <el-button v-if="scope.row.year.length==7" @click="getList(scope.row.year,scope.row.lczt,'month')" size="mini">样品列表</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-col>
            <el-col :span="1">
                <p style="text-align: center"></p>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-row>
                    <div id="chartAll" style="width:100%;height:350px"></div>
                </el-row>
            </el-col>
            <el-col :span="1">
                <p style="text-align: center"></p>
            </el-col>
            <el-col :span="11">
                <div id="chartCount" style="width:100%;height:350px"></div>
            </el-col>
            <el-col :span="1">
                <p style="text-align: center"></p>
            </el-col>
        </el-row>
    </el-row>
    <el-dialog :close-on-click-modal="false" title="样品列表" :visible.sync="dialogVisible" width="80%">
        <el-row class="navbar bg-white">
            <div class="btn-group tool-button" style="line-height: 50px;">
                <el-input placeholder="样品编号或名称" v-trim v-model="pageForm.searchKeyword"  size="mini" style="width:180px;"></el-input>
                <el-button slot="append" icon="el-icon-search" size="mini" @click="doYpSearch" circle></el-button>
            </div>
        </el-row>
        <el-row>
            <el-table :data="ypTableData" @sort-change='yppageOrder' height="300"  border size="small" header-align="center"  style="width: 100%" >
                <el-table-column fixed="left" prop="userOnline" label="操作" width="120" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-button @click="detail(scope.row.id)" size="mini">详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="left" prop="lczt" label="检验状态" width="100px;" header-align="center"  show-overflow-tooltip>
                    <template slot-scope="scope" ><span :class="'statusCss-'+scope.row.lczt"><i :class="'el-icon-'+scope.row.lczt"/>{{getDict(scope.row.lczt,allMap.lcztMap)}}</span></template>
                </el-table-column>
                <el-table-column fixed="left" sortable="custom" prop="ypbh" label="样品编号" width="150px;" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column fixed="left"sortable  prop="ypmc" label="产品名称" width="150px;" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column sortable="custom" prop="jylx" label="检验类别" width="100px;" header-align="center" align="center" show-overflow-tooltip>
                    <template slot-scope="scope" >{{getDict(scope.row.jylx,allMap.jylxMap)}}</template>
                </el-table-column>
                <el-table-column sortable="custom" prop="jyks" label="检验部门" width="200px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="wtdw" label="委托单位" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="ggxh" label="规格型号" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="scrqpc" label="生产日期/批号" width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sb" label="商标" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-row>
        <el-row class="el-pagination-container">
            <el-pagination @size-change="pageSizeChange" @current-change="pageNumberChange" :current-page="pageForm.pageNumber" :page-sizes="[10, 20, 30, 50]"
                           :page-size="pageForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageForm.totalCount">
            </el-pagination>
        </el-row>
        <span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">关 闭</el-button></span>
    </el-dialog>
    <el-drawer :wrapperClosable="false" title="样品详情" :visible.sync="drawer" direction="rtl" size="80%" @opened="openIframe" destroy-on-close>
        <iframe id="iframeDetail" src="" width="100%" height="100%" frameborder="0" marginheight="0"></iframe>
    </el-drawer>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var allMap = {
                jylxMap:${jylxMap},
                lcztMap:${lcztMap}
            };
            return {
                allMap: allMap,
                tableData: [],
                tableDataCount:"",
                pageForm: {type: "year"},
                drawer: false,
                dialogVisible:false,
                ypTableData:[],
                countTableData:[],
                tableMonthData:[],
                deltailURL:""
            }
        },
        methods: {
            handleClick(tab, event) {
                this.pageForm.pageSize = 0;
                this.ypPageData();
            },
            yppageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.ypPageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.ypPageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.ypPageData();
            },
            doYpSearch: function () {
                this.pageForm.pageNumber = 1;
                this.ypPageData();
            },
            ypPageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/reports/acceptance/jbxxData", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.ypTableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/reports/acceptance/allData", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data;
                        self.getALLEchartData()
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },

            getMonth: function (date) {//加载分页数据
                var self = this;
                self.pageForm.type='month';
                self.pageForm.date=date;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/reports/acceptance/allData", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableMonthData = data.data;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageData();
            },
            getList(date,lczt,dateType){
                var self = this;
                self.pageForm.date=date;
                self.pageForm.lczt=lczt;
                self.pageForm.dateType=dateType;
                this.$set(this.pageForm, "searchKeyword", "")
                self.dialogVisible = true;
                self.doYpSearch();
            },
            getCount(date){
                var self = this;
                self.pageForm.date=date;
                //self.dialogVisible = true;
                self.doCountSearch();
            },
            doCountSearch(){
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/reports/acceptance/oneData", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.countTableData = data.data;
                        self.getCountEchartData()
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doMonthSearch(){
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/reports/acceptance/allData", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.countTableData = data.data;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            detail(id){
                this.drawer=true;
                this.deltailURL="/platform/bus/ypxx/jbxx/detail/"+id;
            },
            openIframe:function(){
                $("#iframeDetail").attr("src",this.deltailURL);
            },
            getDict: function (val, map) {
                val = val + "";
                if (val != null && val != undefined && val != "" && map != null && map != undefined) {
                    var str = val.split(",");
                    var strname = "";
                    for (var a = 0; a < str.length; a++) {
                        strname += map[str[a]];
                        if (strname == null) {
                            alert(1)
                        }
                        if (a < (str.length - 1)) {
                            strname += "/";
                        }
                    }
                    return strname;
                }
                return "";
            },
            getALLEchartData() {
                var self = this;
                const chart = document.getElementById("chartAll");
                var name = "年";
                if(self.pageForm.type=='month'){
                    name="月";
                }
                if (chart) {
                    const option = {
                        title: {
                            text: "", // 主标题文本
                            subtext: name+"受理量统计图", // 副标题文本
                            left: 'center', // 标题水平位置
                        },
                        //放置在option中
                        legend: {
                            orient: "vertical",//改变文字颜色的xy轴排列方式
                            icon:'circle',data: [name+"受理量统计"],
                            x:'right',      //可设定图例在左、右、居中
                            y:'top',     //可设定图例在上、下、居中
                            top:'10%',left:'85%',textStyle:{color:"#fff"},
                            align:"left", //改变 legend 文字和颜色位置
                        },
                        tooltip: {},
                        dataset: {source: []},
                        xAxis: {
                            type: 'category',// 网格线颜色更改
                            splitLine: {show: true,lineStyle:{color: ['#E6E6E6'],width: 1,type: 'solid'//网格线类型
                                     }}
                        },
                        yAxis: {},
                        axisLine:{lineStyle:{color:'#fff',width:1,//这里是为了突出显示加上的
                                 }},
                        series: [
                            {type: 'bar',// 修改柱状图颜色
                                itemStyle: {normal: {color: "#40C2FF",//更改颜色
                                        barBorderRadius: [25, 25, 0, 0]// 将立方体改成圆柱
                                    }},barWidth: 15,// 修改柱状图宽度
                            }
                        ]
                    }
                    option.dataZoom = {
                        type:"slider",//slider表示有滑动块的，
                        show:true,
                        xAxisIndex:[0],//表示x轴折叠
                        start:1,//数据窗口范围的起始百分比,表示1%
                        end:40,//数据窗口范围的结束百分比,表示35%坐标
                        bottom:"20",
                    }
                    if(self.tableData.length>10){
                        option.dataZoom.end = 100 - (100 * (self.tableData.length - 10)) / (self.tableData.length - 1)
                    }
                    //chart.style.width = option.clientWidth + "px";
                    const tables = JSON.parse(JSON.stringify(self.tableData))
                    tables.reverse().forEach((item)=>{
                        option.dataset.source.push([item.year+name, item.count]);
                    })
                    self.echartCt = echarts.init(chart)
                    self.echartCt.setOption(option)
                }
            },
            getCountEchartData() {
                var self = this;
                const chart = document.getElementById("chartCount");
                var name = self.pageForm.date+"年";
                if(self.pageForm.type=='month'){
                    name=self.pageForm.date+"月";
                }
                if (chart) {
                    const option = {
                        title: {
                            text: "", // 主标题文本
                            subtext: name+"受理流程统计图", // 副标题文本
                            left: 'center', // 标题水平位置
                        },
                        //放置在option中
                        legend: {
                            orient: "vertical",//改变文字颜色的xy轴排列方式
                            icon:'circle',data: [name+"受理流程统计"],
                            x:'right',      //可设定图例在左、右、居中
                            y:'top',     //可设定图例在上、下、居中
                            top:'10%',left:'85%',textStyle:{color:"#fff"},
                            align:"left", //改变 legend 文字和颜色位置
                        },
                        tooltip: {},
                        dataset: {source: []},
                        xAxis: {
                            type: 'category',
                            axisLabel:{
                                interval:0,
                                rotate:10
                            }
                        },
                        yAxis: {},
                        axisLine:{lineStyle:{color:'#fff',width:1,//这里是为了突出显示加上的
                            }},
                        series: [
                            {type: 'line',itemStyle: {normal: {color: "#40C2FF",}}
                            }
                        ]
                    }
                    //chart.style.width = option.clientWidth + "px";
                    self.countTableData.forEach((item)=>{
                        option.dataset.source.push([item.name, item.count]);
                    })
                    self.echartCt = echarts.init(chart)
                    self.echartCt.setOption(option)
                }
            }
        },
        mounted: function () {
            this.doSearch();
        }
    });

    function nONull(val) {
        if (val != null && val != undefined && val != "") {
            return true;
        } else {
            return false;
        }
    }
</script>
<!--#
}
#-->
